<template>
    <view class="search-container">
        <view class="search-box">
            <text class="iconfont icon-search"></text>
            <input 
                type="text" 
                v-model="searchText"
                class="search-input" 
                :placeholder="placeholder"
                placeholder-class="placeholder"
                confirm-type="search"
                @input="onSearch"
            />
            <text 
                v-if="searchText" 
                class="clear-icon iconfont icon-close"
                @tap="clearSearch"
            ></text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'search-bar',
    data() {
        return {
            searchText: ''
        }
    },
    props: {
        placeholder: {
            type: String,
            default: '请输入商品名称'
        }
    },
    methods: {
        onSearch() {
            this.$emit('search', this.searchText)
        },
        clearSearch() {
            this.searchText = ''
            this.$emit('search', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.search-container {
    padding: 0 ;
    .search-box {
        position: relative;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 12rpx;
        padding: 16rpx 24rpx;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

        .icon-search {
            font-size: 32rpx;
            color: #999;
            margin-right: 12rpx;
        }

        .search-input {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            height: 36rpx;
            line-height: 36rpx;
            background-color: #fff;
        }

        .placeholder {
            color: #999;
            font-size: 28rpx;
        }

        .clear-icon {
            font-size: 32rpx;
            color: #999;
            padding: 10rpx;
        }
    }
}
</style> 